<template>
    <div class="custom-calendar-container">
        <el-calendar>
            <template #date-cell="{ data }">
                <div class="date-cell" :class="{ 'is-selected': data.isSelected }">
                    <div class="solar-date">{{ data.day.split('-')[2] }}</div>
                    <div v-if="!getScheduleForDate(data.day)" class="schedule-list">
                        <span>不可选</span>
                    </div>
                </div>
            </template>
        </el-calendar>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { calendarLists, calendarAdd, calendarEdit, calendarDelete, calendarDetail } from '@/api/apis'


// 模拟的日程数据
// type: 'success' -> 成功/完成, 'warning' -> 提醒, 'danger' -> 紧急, 'info' -> 信息
const scheduleData = ref([
    { id: 1, date: '2024-05-01', title: '劳动节', type: 'info' },
    { id: 2, date: '2024-05-08', title: '产品发布会', type: 'danger' },
    { id: 3, date: '2024-05-08', title: '项目复盘', type: 'warning' },
    { id: 4, date: '2024-05-15', title: 'Vuex 培训', type: 'success' },
    { id: 5, date: '2024-05-20', title: '团队建设', type: 'info' },
    { id: 6, date: '2024-05-20', title: '提交周报', type: 'warning' },
    { id: 7, date: '2024-06-01', title: '儿童节', type: 'info' },
    { id: 8, date: '2024-06-10', title: '端午节', type: 'info' },
]);

/**
 * 根据日期获取对应的日程安排
 * @param {string} date - 日期字符串，格式为 'YYYY-MM-DD'
 */
const getScheduleForDate = (date: string) => {
    // 注意：data.day 的格式是 'YYYY-MM-DD'，与我们的数据格式一致
    return false;
};


const getDataList = async () => {
    await calendarLists()
}
getDataList()
</script>

<style scoped>
/* 自定义日历容器样式 */
.custom-calendar-container {
    border: 1px solid #ebeef5;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 15px 15px 15px 0px;
}

/* 单元格统一样式 */
.date-cell {
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.2s;
}

/* 鼠标悬浮时给一点反馈 */
.el-calendar-table .el-calendar-day:hover {
    background-color: #f5f7fa;
}

/* 选中日期的样式 */
.date-cell.is-selected {
    background-color: #f0f8ff;
    /* 淡蓝色背景 */
    border-radius: 4px;
}

/* 日期数字 */
.solar-date {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

/* 日程列表容器 */
.schedule-list {
    width: 100%;
    flex: 1;
    /* 占据剩余空间 */
    /* 配合 el-scrollbar */
    display: flex;
    justify-content: center;
    color: #999;
}

/* 单个日程项目 */
.schedule-item {
    margin-bottom: 4px;
    width: 100%;
}

.schedule-item .el-tag {
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 关键样式：确保日历单元格有足够的高度来容纳内容 */
:deep(.el-calendar-table .el-calendar-day) {
    /* height: 120px; */
    /* min-height: 120px; */
    /* 保证最小高度 */
    padding: 0;
    /* 移除默认内边距，让我们的 .date-cell 来控制 */
}
</style>